<template>
  <div id="box">
    <div style="margin-bottom: 20px;">
      <el-button v-has :type="type=='待处理'?'primary':''" @click="type='待处理'">待处理</el-button>
      <el-button v-has :type="type=='已处理'?'primary':''" @click="type='已处理'">已处理</el-button>
    </div>
    <template v-if="type=='待处理'">
      <div class="searchBox">
        <div>
          <el-button type="primary" @click="check()">批量处理</el-button>
        </div>
        <div>
          <el-input class="inputs" v-model="value" placeholder="请输入业务类型"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>
      <el-table ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" :data="tableData"
        border fit stripe highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center">
          <template slot-scope="scope">
            <div v-if="item.title!='status'">{{scope.row[item.title]}}</div>
            <div v-if="item.title=='status'">
              <template v-if="scope.row[item.title]==0">
                <el-button type="primary" size="mini" @click="agree(scope.$index)">同意</el-button>
                <el-button type="danger" size="mini" @click="reject(scope.$index)">驳回</el-button>
              </template>
              <template v-if="scope.row[item.title]==1">
                <el-button type="primary" size="mini">已通过</el-button>
              </template>
              <template v-if="scope.row[item.title]==2">
                <el-button type="danger" size="mini">已拒绝</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='已处理'">
      <div class="searchBox">
        <div style="display: flex;justify-content: flex-end;">
          <el-input class="inputs" v-model="value1" placeholder="请输入业务类型"></el-input>
          <el-button type="primary" @click="search1()">搜索</el-button>
        </div>
      </div>
      <el-table ref="multipleTable" tooltip-effect="dark" :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template slot-scope="scope">
            <div v-if="item.title!='status'&&item.title!='do'">{{scope.row[item.title]}}</div>
            <div v-if="item.title=='status'">已处理</div>
            <el-link v-if="item.title=='do'" @click="Visible=true,ruleForm=scope.row">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="Visible">
      <el-dialog title="消息详情" :visible.sync="Visible" width="30%">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="业务类型">
                <el-input v-model="ruleForm.type" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="消息内容">
                <el-input v-model="ruleForm.content" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请人">
                <el-input v-model="ruleForm.user" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请时间">
                <el-input v-model="ruleForm.time" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        Visible: false,
        ruleForm: {},
        type: '待处理',
        value: '',
        value1: '',
        tableHead: [{
            id: 1,
            label: "业务类型",
            title: "type",
          },
          {
            id: 2,
            label: "消息内容",
            title: "content",
          },
          {
            id: 3,
            label: "申请人",
            title: "user",
          },
          {
            id: 4,
            label: "申请时间",
            title: "time",
          },
          {
            id: 5,
            label: "状态",
            title: "status",
          },
        ],
        tableData: [{
            id: 1,
            type: '库表订阅申请',
            content: '订阅任务名: test2 订阅描述:test',
            user: 'zd',
            time: '2021-10-25 14:32:50',
            status: 0
          },
          {
            id: 2,
            type: '文件订阅申请',
            content: '订阅任务名: 1 订阅描述:00003',
            user: 'zd',
            time: '2021-10-26 15:25:50',
            status: 0
          },
          {
            id: 3,
            type: '库表订阅申请',
            content: '订阅任务名: 00008成都发布 订阅描述:00005',
            user: 'zd',
            time: '2021-10-25 16:22:50',
            status: 0
          }
        ],
        multipleSelection: [],
        nesTables: [{
            id: 1,
            type: '库表订阅申请',
            content: '订阅任务名: test2 订阅描述:test',
            user: 'zd',
            time: '2021-10-25 14:32:50',
            status: 0
          },
          {
            id: 2,
            type: '文件订阅申请',
            content: '订阅任务名: 1 订阅描述:00003',
            user: 'zd',
            time: '2021-10-26 15:25:50',
            status: 0
          },
          {
            id: 3,
            type: '库表订阅申请',
            content: '订阅任务名: 00008成都发布 订阅描述:00005',
            user: 'zd',
            time: '2021-10-25 16:22:50',
            status: 0
          }
        ],
        tableData1: [{
            id: 1,
            type: '库表订阅申请',
            content: '成都市向你发送了一条消息',
            user: '11',
            time: '2021-10-25 14:32:50',
            status: '已处理'
          },
          {
            id: 2,
            type: '文件订阅申请',
            content: '审批通过,发布任务名:00023',
            user: 'admin',
            time: '2021-10-26 15:25:50',
            status: '已处理'
          },
          {
            id: 3,
            type: '库表订阅申请',
            content: '订阅任务名: 00008成都发布 订阅描述:00005',
            user: 'zd',
            time: '2021-10-25 16:22:50',
            status: '已处理'
          }
        ],
        tableHead1: [{
            id: 1,
            label: "业务类型",
            title: "type",
          },
          {
            id: 2,
            label: "消息内容",
            title: "content",
          },
          {
            id: 3,
            label: "申请人",
            title: "user",
          },
          {
            id: 4,
            label: "申请时间",
            title: "time",
          },
          {
            id: 5,
            label: "状态",
            title: "status",
          },
          {
            id: 6,
            label: '操作',
            title: 'do'
          }
        ],
        newsdata: [{
            id: 1,
            type: '库表订阅申请',
            content: '成都市向你发送了一条消息',
            user: '11',
            time: '2021-10-25 14:32:50',
            status: '已处理'
          },
          {
            id: 2,
            type: '文件订阅申请',
            content: '审批通过,发布任务名:00023',
            user: 'admin',
            time: '2021-10-26 15:25:50',
            status: '已处理'
          },
          {
            id: 3,
            type: '库表订阅申请',
            content: '订阅任务名: 00008成都发布 订阅描述:00005',
            user: 'zd',
            time: '2021-10-25 16:22:50',
            status: '已处理'
          }
        ]
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      agree(num) {
        this.$confirm('此操作将同意该申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.forEach((elem, index) => {
            if (index == num) {
              elem.status = 1
            }
          })
          this.nesTables = [...this.tableData]
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      reject(num) {
        this.$confirm('此操作将拒绝该申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.forEach((elem, index) => {
            if (index == num) {
              elem.status = 2
            }
          })
          this.nesTables = [...this.tableData]
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      check() {
        if (!this.multipleSelection.length) {
          this.$message({
            type: 'error',
            message: '请至少选择一个'
          })
          return
        }
        this.$confirm('请选择批量处理任务操作', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.tableData.forEach((elem, index) => {
            this.multipleSelection.forEach(item => {
              if (elem.id == item.id) {
                elem.status = 1
              }
            })
          })
          this.nesTables = [...this.tableData]
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.tableData.forEach((elem, index) => {
            this.multipleSelection.forEach(item => {
              if (elem.id == item.id) {
                elem.status = 2
              }
            })
          })
          this.nesTables = [...this.tableData]
          this.$message({
            type: 'info',
            message: '操作成功'
          });
        });
      },
      search() {
        if (!this.value) {
          this.tableData = [...this.nesTables]
        } else {
          this.tableData = this.tableData.filter(elem => elem.type.indexOf(this.value) != -1)
        }
      },
      search1() {
        if (!this.value1) {
          this.tableData1 = [...this.newsdata]
        } else {
          this.tableData1 = this.tableData1.filter(elem => elem.type.indexOf(this.value1) != -1)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  #box {
    padding: 20px;
    width: 100%;
  }

  .searchBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;

    >div {
      display: flex;
    }
  }

  ::v-deep .el-input__inner {
    width: 200px;
  }
</style>
